<template>
  <view class="carlist-warp">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="车辆绑定"></van-nav-bar>
    <!-- #endif -->
    <QcscrollUni
      ref="mescrollRef"
      :noDataType="'carData'"
      :getData="getData"
      :bottom="bottomScroll"
      :height="heightScroll">
      <view
        class="carlist-item"
        hover-class="view-box-btn-hover"
        v-for="(item, index) in data.carData"
        :key="index"
        :id="item.plateNumber">
        <view class="car-top">
          <view class="tip-car" v-if="item.isDefault">默认车辆</view>
          <view v-else></view>
          <text class="iconfont icon-detele" @tap.stop="deleteCarInfo(item)"></text>
        </view>
        <view class="car-content" @tap.stop="jumpToCarInfo(item)">
          <view class="carNum">{{ item.plateNumber }}</view>
          <view class="vin">车辆识别代码（VIN）：{{ item.vin }}</view>
        </view>
      </view>
    </QcscrollUni>
    <view class="bottom-wrap" :style="styleBntH">
      <button class="bnt-wrap bnt" @tap="goToAddCar">添加车辆</button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getSystemInfo, getwv, setToastInstance, systemInfo } from '@mixins/info';
import { queryCarList, deleteCar, queryIsSupportOcr } from '@/service/apis/mine';
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');

const styleBntH = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
// const topScroll = '114rpx';
const bottomH = Number(62) + Number(`${getSystemInfo().safeBottom}`);
console.log(bottomH);

const bottomScroll = `${bottomH}px`;

const heightScroll = `${getSystemInfo().screenHeight - bottomH - systemInfo.navHeight}px`;

const data = reactive({
  carData: [] as any, // 等级数据
  isSupportOcr: '0',
});
const jumpToCarInfo = (item: any) => {
  uni.navigateTo({
    url: `/pagesMyCenter/chargeCar/carDetail?id=${item.id}`,
  });
};
const goToAddCar = () => {
  if (data.isSupportOcr == '1') {
    uni.navigateTo({
      url: `/pagesMyCenter/chargeCar/uploadDrive`,
    });
  } else {
    uni.navigateTo({
      url: `/pagesMyCenter/chargeCar/addCar`,
    });
  }
};

const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    queryCarList({}, extraParams, { account: { accountId: getItem('userid') } })
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          data.carData = res.list;
        } else {
          data.carData = [...data.carData, ...res.list];
        }
        resolve({ list: data.carData, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

queryIsSupportOcr({}).then((res: any) => {
  data.isSupportOcr = res;
});

const deleteCarInfo = (item: any) => {
  deleteCar(
    { id: item.id, isDefault: item.isDefault },
    { account: { accountId: getItem('userid') } }
  ).then((res: any) => {
    console.log(res);
    $toast('删除成功');
    getData({
      pageNum: 1,
      pageSize: 10,
    });
  });
};

let reData = ref('');
const mescrollRef = ref();
onShow(() => {
  if (!reData.value) {
    mescrollRef.value?.resetUpScroll();
  } else {
    reData.value = '';
  }
});
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f4f4;
}
.carlist-warp {
  height: 100%;
  // .hr {
  //   height: calc(100vh - 190rpx);
  //   display: flex;
  //   flex-flow: column;
  //   overflow-y: auto;
  //   background-color: #fff;
  //   .title {
  //     font-size: 14px;
  //     line-height: 22px;
  //     color: #858585;
  //     margin-left: 16px;
  //     margin-top: 12px;
  //   }
  // }
  .carlist-item {
    // display: flex;
    // flex-direction: row;
    background-color: #ffffff;
    // width: 670rpx;
    position: relative;
    align-items: center;
    border-radius: 5px;
    border-bottom: 1px solid #f2f2f2;
    // padding: 0 16px;
    margin: 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    .car-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 0.5px solid #eeeeee;
      .tip-car {
        background: $uni-color-primary;
        border-radius: 8px 0px;
        color: #ffffff;
        font-weight: 600;
        font-size: 12px;
        line-height: 22px;
        padding: 2px 10px;
      }
      .icon-detele {
        color: $uni-color-primary;
        padding-right: 12px;
        line-height: 22px;
      }
    }
    .car-content {
      padding: 16px;
      .carNum {
        font-weight: 600;
        font-size: 16px;
        line-height: 30px;
        color: $uni-color-primary;
      }
      .vin {
        font-size: 12px;
        line-height: 22px;
        color: #545454;
        margin-top: 8px;
      }
    }
  }
}
// .item {
//   display: flex;
//   flex-direction: row;
//   background-color: #ffffff;
//   width: 670rpx;
//   position: relative;
//   align-items: center;
//   border-radius: 0px;
//   border-top-right-radius: 6px;
//   border-top-left-radius: 6px;
// }

// .item2 {
//   display: flex;
//   flex-direction: row;
//   background-color: #ffffff;
//   width: 670rpx;
//   position: relative;
//   align-items: center;
// }
// .item3 {
//   display: flex;
//   flex-direction: row;
//   background-color: #ffffff;
//   width: 670rpx;
//   position: relative;
//   align-items: center;
//   border-radius: 0px;
//   border-bottom-right-radius: 5px;
//   border-bottom-left-radius: 5px;
// }
// .line {
//   width: 100%;
//   height: 2rpx;
//   display: flex;
//   flex-flow: row;
//   background-color: #ffffff;
// }
// .line-one {
//   width: 40rpx;
//   background: #ffffff;
//   height: 5rpx;
// }
// .line-two {
//   width: 594rpx;
//   background: #f1f2f3;
//   height: 5rpx;
// }
// .line-three {
//   width: 36rpx;
//   height: 2rpx;
//   background: #ffffff;
// }

// .carNumber {
//   position: absolute;
//   right: 43px;
//   height: 50px;
//   line-height: 50px;
// }
// .detail2 {
//   font-size: 15px;
//   position: absolute;
//   right: 38rpx;
//   height: 50px;
//   line-height: 50px;
//   display: flex;
//   align-items: center;
// }
// .detailImage {
//   width: 14rpx;
//   height: 30rpx;
// }
.view-box-btn-hover {
  background: #f7f7f7;
}

.bottom-wrap {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #f2f2f2;
  box-sizing: border-box;
  .bnt {
    height: 44px;
    width: 343px;
    margin-top: 9px;
    border-radius: 50px;
  }
}
</style>